<template>
  <div>
    <Header></Header>
    <div style="background: #eee;">
      <!-- 面包屑导航 -->
      <div class="nav-wrap">
        <p class="nav-p-pc" style="margin-top:-25px;text-align:left;">
          <a href="/">课程列表</a>
          <span class="sharp-content">&gt;</span>
          <span class="nav-sec">修改密码</span>
        </p>
      </div>
    </div>

    <div id="updatePasswordForm">
      <el-form>
        <el-form-item>
          <h1 style="font-size:30px;color:#00B38A">拉勾</h1>
        </el-form-item>
        <el-form-item>
          <el-input v-model="firstpassword" placeholder="请输入您的密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="secondpassword" placeholder="请再次确认您的密码"></el-input>
        </el-form-item>
      </el-form>
      <el-button
        style="width:100%;margin:0px auto;background-color: #00B38A;font-size:20px"
        type="primary"
        @click="updatePassword"
      >确 定</el-button>
      <p></p>
    </div>
  </div>
</template>

<script>
export default {
  name: "setting",
  data() {
    return {
      userid: null,
      originpassword:"",
      password: "",
      firstpassword: "",
      secondpassword: ""
    };
  },
  mounted() {
    this.userid = this.$route.params.userid;
    this.originpassword=this.$route.params.password;
    console.log(this.originpassword)
  },
  methods: {
    updatePassword() {
      console.log(this.originpassword+","+this.firstpassword+","+this.secondpassword)
      if (this.firstpassword != this.secondpassword) {
        alert("两次输入的密码不匹配，请检查后重试");
      }if(this.firstpassword==this.secondpassword&&this.firstpassword==this.originpassword){
        alert("新密码不能与旧密码相同，请重新输入")
      }
       else {
        this.password = this.firstpassword = this.secondpassword;
        this.axios
          .get("http://localhost:80/user/updatePassword", {
            params: {
              userid: this.userid,
              password: this.password
            },
          })
          .then(result => {
            console.log(result);
            alert("密码修改成功！");
            window.location.href="http://localhost:8080/"
          })
          .catch(error => {
            this.$message.error("修改密码失败");
          });
      }
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
div {
  display: block;
}
.nav-wrap {
  padding-top: 40px;
  height: 50px;
  background: #fff;
}
.nav-p-pc {
  font-size: 16px;
  margin: 17px auto;
  vertical-align: top;
  width: 750px;
}
.nav-p-pc a:active,
.nav-p-pc a:link,
.nav-p-pc a:visited {
  color: #666;
}
.nav-p-pc .sharp-content {
  color: #666;
  margin-left: 5px;
}
.nav-p-pc .nav-sec {
  margin-left: 5px;
  color: #999;
}
#updatePasswordForm {
  width: 700px;
  margin: 0 auto;
}
</style>
